<template>
  <div class="home">
    <div class="item" v-if="showComponent">
      <Charts1 :data="dataList"></Charts1>
    </div>
    <div class="item" v-if="showComponent">
      <Charts2 :data="dataList"></Charts2>
    </div>
    <div class="item" v-if="showComponent">
      <Charts3 :data="dataList"></Charts3>
    </div>
    <div class="item" v-if="showComponent">
      <Charts4 :data="dataList"></Charts4>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Charts1 from './components/charts1.vue'
import Charts2 from './components/charts2.vue'
import Charts3 from './components/charts3.vue'
import Charts4 from './components/charts4.vue'
import { onMounted, computed, ref, reactive } from 'vue'
import { getBook, } from '@/api/book' //api/后面不能大写Mgmt
const dataList = ref([])
const showComponent = ref(false)
const getList = async () => {
  const res = await getBook({pageNum: 1, pageSize: 5000})
  if (res.code === 200) {
    dataList.value = res.data.list
    showComponent.value = true
  }
}
onMounted(() => {
  getList()
})
</script>
<style scoped lang="scss">
.home{
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    .item{
      width: calc((100% / 2) - 40px);
      height: 360px;
      margin: 10px;
    }
}
</style>
